<!--
 * @Author: zi.yang
 * @Date: 2021-03-11 23:20:01
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-03-11 23:58:22
 * @Description: In User Settings Edit
 * @FilePath: \vue-music\src\components\state\test-four.vue
-->
<template>
  <div> ref 配合 reactive 测试 ：{{flag ? '执行减法' : '执行加法'}} : {{ count }} </div>
</template>

<script>
import { reactive, ref } from '@vue/composition-api';

export default {
  name: 'test-four',
  setup() {
    // 为解决 ref() 注入值需要使用 .value 的形式
    const count = ref(0);
    const flag = ref(true);
    const state = reactive({
      count, flag,
    });

    setInterval(() => {
      if (flag) {
        state.count -= Math.round(Math.random() * 100);
      }
      state.count += Math.round(Math.random() * 110);
      state.flag = !state.flag;
    }, 1000);

    return { count, flag };
  },
};

</script>

<style scoped>
</style>
